<template>
  <div class="gouwuchetijiao">
    <div v-if="chongis" class="top">
      <div class="toptop">
        <i class="iconfont icon-duihao2"></i>
        <div>
          订单已提交，请于24小时内完成支付
          <span class="huang">( 逾期订单将被取消 )</span>
        </div>
      </div>
      <shouhuodizhi :item="dizhi" />
    </div>
    <div v-if="chongis" class="allmain">
      <paystyle :zongjia="this.$store.state.zongjia" @zhifuchenggong="chongis=false" />
    </div>
    <zhifuchenggong v-else />
  </div>
</template>

<script>
// @ is an alias to /src
import paystyle from "@/components/paystyle.vue";
import shouhuodizhi from "@/components/shouhuodizhi.vue";
import zhifuchenggong from "@/components/zhifuchenggong.vue";
import "@/assets/font/iconfont.css";
import axios from "axios";
export default {
  data() {
    return {
      chongis: true,
      dizhi: {
        id: 1,
        name: "但小兵",
        prov: "北京",
        city: "北京市",
        district: "昌平区",
        dizhixiangqing: "天通苑明天第一城4号楼101",
        quma: "010",
        phone: "",
        telephone: "1234567890",
        morenis: 1
      }
    };
  },
  mounted() {
    var _this = this;
    var url = this.$store.state.url;
    axios.post(url + "dizhiashiyong",{id:localStorage.shiyong}).then(
      res => {
        // 成功回调
        if (res.data) {
          _this.dizhi = res.data.data[0];
           window.console.log(res.data.data[0]);
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
  },
  components: {
    paystyle,
    shouhuodizhi,
    zhifuchenggong
  },
  methods: {}
};
</script>
<style scoped>
.gouwuchetijiao {
  width: 80%;
  margin: 0px auto;
}
.huang {
  color: #f08200;
}
.top {
  padding-bottom: 2rem;
}
div.toptop {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 3rem;
  font-size: 1.2rem;
}
div.toptop .iconfont {
  color: #f08200;
  font-size: 4rem;
  padding-bottom: 2rem;
}


</style>